<template>
  <div class="mylove">
    <div v-for="item in list" :key="item.id" >
      <van-card class="dee" :thumb="item.al.picUrl" @click="clickr(item.id)">
        <template #title class="dec">
          <br />
          {{ item.al.name }}
          <br /><br />
          <p>
            歌手: <span>{{ item.ar[0].name }}</span>
          </p>
          <h5><van-icon name="play-circle-o" /></h5>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { WdxihAPi, WWdxihAPI } from "../../api/wdxh";
import { Toast } from "vant";
export default {
  name: "mylove",
  data() {
    return {
      id: "",
      list:"",
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    this.ood();
    //  获取路由传来的id、
    this.id = this.$route.params.id;
     console.log(this.id);
    
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //歌单列表id
    async ood(ids) {
      const rustr = await WdxihAPi(ids);
      this.rustr = rustr.ids;
      console.log(this.rustr);
      console.log({ ids: this.rustr.join(",") });
      console.log(this.rustr.join(","));

      const res2 = await WWdxihAPI(this.rustr.join(","));
      this.list = res2.songs;
      console.log(this.list);
    },
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    //点击喜欢跳转
    clickr(id) {
      console.log(id);
      this.$router.push(`/songdetail/${id}`);
    },
  },
};
</script>

<style scoped>
.dee {
  position: relative;
  font-size: 14px;
}
.dee span {
  color: red;
}
.dee h5 {
  position: absolute;
  top: 50%;
  right: 10px;
  font-size: 22px;
  color: #666;
}
</style>
